<template>
<div class="viduesmax">
    <app-scroll class="content">
        <div>  
            <app-scroll :scrollX="true" :scrollY="false" :width="wrapWidth">
                <div class="select" ref="wrap">
                    <ul class="list ">
                        <li @click="handle(index)"  v-for="(item,index) in data" :key="index">
                            <span v-if="num==index"></span>
                            {{item}}
                        </li>
                    </ul>
                </div>
            </app-scroll>
            <ul class="vidues">
                <li class="vidues-list" v-for="(item,index) in vmax" :key="item.id">
                    <div class="top">
                        <div class="shipin">
                            <video class="video" loop controls width="100%" ref="video" v-if="run">
                                <source :src="item.video.url" type="video/mp4"/>
                            </video>
                            <img :src="item.video.imgUrl" alt="" v-if="!run">
                        </div>
                        <h1 v-if="!run">{{item.title}}</h1>
                        <h2 v-if="!run">>{{item.video.viewCount}}</h2>
                        <span class="iconfont icon-iconset0481" @click="dianji(index)" v-if="!run"></span>
                    </div>
                    <div class="bottom">
                        <div class="user">
                            <img :src="item.user.avatarurl" alt="">
                            <span>{{item.user.nickName}}</span>
                        </div>
                        <div class="pinglun">
                            <span class="iconfont icon-xiaoxi-"></span>
                            <span>{{item.commentCount}}</span>
                        </div>
                        <div class="fenxiang">
                            <span class="iconfont icon-icon--"></span>
                        </div>
                    </div>   
                </li>
            </ul>
        </div>
    </app-scroll>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            data:[
                "预告片",
                "新片看点",
                "姜子牙",
                "每周必看",
                "说电影",
                "好片推荐",
                "犯罪",
                "奇幻","爱情","追剧","追星",
            ],
            wrapWidth:0,
            num:0,
            run:false
        }
    },
    computed:{
        ...mapState({
            vmax:state=>state.viduesmax.vmax
        })
    },
    watch:{
        vmax(newval){
            console.log(this.vmax);
        }
    },
    mounted(){
        this.wrapWidth=this.$refs.wrap.offsetWidth;
    },
    methods:{
        handle(index){
            this.num=index
        },
        dianji(index){
            console.log(index);
            console.log(this.$refs.video);
            // this.$refs.video[index].play();
            this.run=true
        }
    },
    created(){
        this.$store.dispatch('viduesmax/requestViduesMax')
    }

}
</script>

<style lang="scss" scoped>
.viduesmax{
    width: 100%;
    height: calc(100% - 100px);
    // background: yellow;
}
.content{
    width: 100%;
    height: 100%;
}
.select{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: max-content;
    height: 46px;
    .list{
        // margin-top: 22px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        box-sizing: border-box;
        height: 45px;
        li{
            width: 60px;
            height: 45px;
            color: #333333;
            line-height: 45px;
            text-align: center;
            font-size: 15px;
            position: relative;
            // &.active{
            //     border-bottom: 3PX solid #f03d37;
            // }
            span{
                display: inline-block;
                width: 20px;
                height: 3px;
                position: absolute;
                top: 36px;
                left: 20px;
                background:#f03d37;
            }
        }
    }
}
.top{
    width: 375px;
    height: 211px;
    position: relative;
    .shipin{
        width: 375px;
        height: 211px;
        position: relative;
        img{
            width: 375px;
            height: 211px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #video{
            width: 375px;
            height: 211px;
        }
    }
    h1{
        width: 289px;
        height: 24px;
        color: #ffffff;
        font-size: 17px;
        margin: 9px 15px 19px;
        position: absolute;
        top: 0;
        left: 0;
    }
    h2{
        width: 100%;
        height: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
        color: #ffffff;
        font-size: 12px;
        // padding: 0 0 0 11px;
        line-height: 30px;
        box-sizing: border-box;
    }
    span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 58px;
        width: 58px;
        font-size: 58px;
        color: #ffffff;
    }
    
}
.bottom{
    width: 375px;
    height: 46px;
    background: #ffffff;
    padding: 0 0 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user{
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 22px;
            height: 22px;
        }
        span{
            
            height: 21px;
            font-size: 14px;
            color: #666;
            margin:0 0 0 8px;
        }
    }
    .pinglun{
       color: #666;
       font-size: 12px;
       margin: 0 12px 0 0;
       padding: 0 5px 0 23px;
       display: flex;
        align-items: center;
        margin-left: 50px;
       .iconfont{
           font-size: 20px;
       }
    }
    .fenxiang{
        width: 33px;
        height: 35px;
        font-size: 20px;
        margin: 0 7.5px 0 0;
        padding:  0 7.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont{
            font-size: 20px;
        }
    }
}
</style>